<template>
  <div class="header">
    <div class="header-left">
        <el-button circle size="mini" style="background-color:#236CFF "><div class="t1">{{userName}}</div></el-button>
        <span class="header-title text-center">{{userName}} ({{roleName}})</span>
<!--        <el-button round icon="el-icon-sort" size="small">切换</el-button>-->
    </div>
    <div class="header-right">
          <el-button size="mini" round icon="el-icon-right" @click="exit"
                     style="text-align: right;font-size: 12px">
              返回门户
          </el-button>
    </div>
  </div>
</template>

<script>
import Icon from '@/components/Icon'
import {Tooltip} from 'element-ui'
// eslint-disable-next-line no-unused-vars
import {userLogout} from '../api/user'
import store from '../store'

export default {
  name: 's-header',
  exit: 'back to menu',
  props: {
    collapseTrigger: Function,
    collapse: Boolean,
    logout: Function,
    userName: String,
    roleName: String
  },
  components: {
    's-icon': Icon,
    's-tooltip': Tooltip
  },
  methods: {
    exit () {
      // 清除session的登录用户
      // 清除前端用户
      // 跳转登录
      userLogout().then(res => {
        store.dispatch('user/clearUserInfo')
        this.$router.push({path: '/login'})
      })
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../assets/styles/var";
  .header {
    width: 100%;
    height: 60px;
    padding: 0 23px;
    line-height: 50px;
    box-sizing: border-box;
    background: #ffffff;
    border-bottom: 1px solid @borderBottomColor;
    overflow: hidden;
    > span {
      vertical-align: middle;
    }
  }
  .header-left {
    display: inline-block;
  }
  .header-right {
    font-size: 14px;
    float: right;
    display: inline-block;
  }
.header-title {
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  color: #1a1a1a;
}
  .header-icon {
    font-size: 22px;
    color: inherit;
    outline: none;
    display: inline-block;
    text-decoration: none;
    vertical-align: top;
    &:hover {
      color: @dch;
    }
  }
  .header-logout {
    .header-icon;
    .text-center;
    font-size: 14px;
    margin-left: 10px;
    line-height: normal;
    &:hover {
      color: red;
    }
  }
  .text-center{
    vertical-align: middle;
  }
  .t1{
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    color: #fff;

  }
</style>
